<template>
    <div class="expandCourse">
        <!--视频url-->
        <div class="video">
            <video width="524"
                   height="288"
                   controls>
                <source :src="row.courseUrl" type="video/mp4">
            </video>
        </div>

        <!--课程名称-->
        <div class="box">
            <Card class="card title" dis-hover>
                课程名称:
            </Card>
            <Card class="cont">
                {{row.courseName}}
            </Card>
        </div>

        <!--课程时长-->
        <div class="box">
            <Card class="card title" dis-hover>
                课程时长:
            </Card>
            <Card class="cont">
                <TimePicker :value="row.courseTime"
                            disabled
                            style="margin:-6px 0px;width: 160px">
                </TimePicker>
            </Card>
        </div>

        <!--浏览人次-->
        <div class="box">
            <Card class="card title" dis-hover>
                浏览人次:
            </Card>
            <Card class="cont">
                <Icon type="md-eye"/>
                {{row.courseView}}
            </Card>
        </div>

        <!--课程评分-->
        <div class="box">
            <Card class="card title" dis-hover>
                课程评分:
            </Card>
            <Card class="cont score">
                {{row.courseScore}}
                <el-rate disabled
                         allow-half
                         v-model="row.courseScore"
                         :low-threshold=1.5
                         :high-threshold=3
                         style="margin:2px 0px 0px 16px;float: right"
                         :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                </el-rate>
            </Card>
        </div>

        <!--会员类型-->
        <div class="box">
            <Card class="card title" dis-hover>
                会员类型:
            </Card>
            <div class="cont img">
                <img v-if="row.vip==1" src="../../assets/course/vip.svg" class="vip">
                <img v-if="row.vip==0" src="../../assets/course/all.svg" class="all">
            </div>
        </div>

        <!--创建时间-->
        <div class="box">
            <Card class="card title" dis-hover>
                创建时间:
            </Card>
            <Card class="cont cTime">
                <DatePicker :value="formatDateTime(row.createTime)"
                            format="yyyy/MM/dd   HH:mm:ss"
                            type="date"
                            disabled
                            style="width: 200px;margin:-6px 0px;">
                </DatePicker>
            </Card>
        </div>

        <!--修改时间-->
        <div class="box">
            <Card class="card title" dis-hover>
                修改时间:
            </Card>
            <Card class="cont uTime">
                <DatePicker :value="formatDateTime(row.updateTime)"
                            format="yyyy/MM/dd   HH:mm:ss"
                            type="date"
                            disabled
                            style="width: 200px;margin:-6px 0px;">
                </DatePicker>
            </Card>
        </div>

    </div>
</template>

<script>
    export default {
        name: "",
        props: {
            row: Object
        },
        components: {},
        data() {
            return {}
        },
        methods: {
            formatDateTime: function (inputTime) {
                let date = new Date(inputTime);
                let y = date.getFullYear();
                let m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let minute = date.getMinutes();
                let second = date.getSeconds();
                minute = minute < 10 ? ('0' + minute) : minute;
                second = second < 10 ? ('0' + second) : second;
                return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
            }
        },
        mounted() {
        }
    }
</script>

<style scoped>
    /*盒子 防止子元素浮动*/
    .expandCourse .box {
        overflow: hidden;
        margin-top: 8px;
    }

    /*课程封面*/
    .expandCourse .video {
        float: right;
        width: 524px;
        height: 288px;
    }

    /*card 浮动*/
    .expandCourse .card,
    .expandCourse .cont {
        float: left;
        margin-left: 5px;
    }

    /*左侧标题*/
    .expandCourse .box .title {
        width: 108px;
        font-weight: bold;
    }

    /*card vip用户*/
    .expandCourse .box img.vip {
        display: inline-block;
        width: 70px;
        height: 56px;
        margin-left: 5px;
    }

    /*card 所有用户 all*/
    .expandCourse .box img.all {
        display: inline-block;
        width: 70px;
        height: 46px;
        margin-top: 5px;
    }
</style>